<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请假信息管理系统 -- 班级信息管理</title>
    <script src="../../../js/jquery.min.js"></script>
    <link href="../../../css/classManage/classesManage.css" rel="stylesheet">
    <link href="../../../css/common/common.css" rel="stylesheet">
</head>
<body>
<!-- 顶部弹出提示信息容器 -->
<!--蓝色提示成功信息-->
<div id="notificationBlue" class="notificationBlue">
    <span id="messageBlue"></span>
</div>
<!--灰色提示普通信息-->
<div id="notificationGrey" class="notificationGrey">
    <span id="messageGrey"></span>
</div>
<!--黄色色提示警告信息-->
<div id="notificationYellow" class="notificationYellow">
    <span id="messageYellow"></span>
</div>
<!-- 头部 -->
<head th:insert="~{common/common::header}">
</head>
<!-- 左边 -->
<aside th:insert="~{common/common::aside}">
</aside>
<!-- 中间 -->
<main class="main">
    <div class="box">
        <div class="search-container">
            班级编号：<input type="text" class="search-box" placeholder="搜索..." id="searchClassID">
            班级名称：<input type="text" class="search-box" placeholder="搜索..." id="searchClassName">
            <label for="searchGrade">年级：
                <select id="searchGrade" style="width: 200px;height: 30px;" name="searchGrade">
                    <option>请选择年级</option>
                </select>
            </label>

            <label for="searchMajor">
                专业名称：<input type="text" class="search-box" placeholder="搜索..." id="searchMajor">
<!--                <select id="searchMajor" style="width: 200px;height: 30px;" name="searchMajor">-->
<!--                    <option>请选择专业</option>-->
<!--                </select>-->
            </label>

            <button class="search-button action-button" onclick="searchClasses()">搜索</button>
            <button class="reset-button action-button" onclick="reset()">重置</button>
        </div>
        <div>
            <button class="add-button action-button"  onclick="addClassesInfo()">新增班级信息+</button>
        </div>
        <table>
            <thead>
            <tr>
                <th>班级编号</th>
                <th>班级名称</th>
                <th>学院名称</th>
                <th>专业名称</th>
                <th>年级</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="class,classes:${pageVo.list}">
                <td th:text="${class.classID}">数据1</td>
                <td th:text="${class.className}">数据2</td>
                <td th:text="${class.depName}">数据3</td>
                <td th:text="${class.major}">数据4</td>
                <td th:text="${class.grade}">数据5</td>
                <td class="action-buttons">
                    <button id="editButton" class="action-button edit-button" th:onclick="editDepartmentPage('[(${class.classID})]') " >编辑</button>
                    <button id="deleteButton" class="action-button delete-button" th:onclick="deleteClasses('[(${class.classID})]')">删除</button>
                </td>
            </tr>
            </tbody>
        </table>

        <div class="pagination">
            <span th:text="'共'+${pageVo.getTotal()}+'条'"></span>
            <span class="page-link" id="beforePage" onclick="beforeChangePage()"> 上一页 </span>
            <span th:text="'页号：'+${pageVo.getPageNum()}"></span>
            <span class="page-link" id="afterPage" onclick="afterChangePage()"> 下一页 </span>
        </div>
    </div>
</main>
</body>

<script th:inline="javascript" type="text/javascript">
    var gradeList = [[${grades}]];
    var gradeNum = []
    gradeList.forEach(item => {
        gradeNum.push({
            "label" : item,
            "value" : item
        })
        console.log(item)
    })

    var searchGrade = document.getElementById("searchGrade");
    gradeNum.forEach(option => {
        var optionElement = document.createElement("option");
        optionElement.value = option.value;
        optionElement.textContent = option.label;
        searchGrade.appendChild(optionElement);
    })

    var majorList = [[${majors}]];
    var majorNum = []
    majorList.forEach(item => {
        majorNum.push({
            "label" : item,
            "value" : item
        })
        console.log(item)
    })

    var searchMajor = document.getElementById("searchMajor");
    majorNum.forEach(option => {
        var optionElement = document.createElement("option");
        optionElement.value = option.value;
        optionElement.textContent = option.label;
        searchMajor.appendChild(optionElement);
    })

    function showNotification(id) {
        const notification = document.getElementById(id);
        notification.classList.add("show");

        setTimeout(function() {
            notification.classList.remove("show");
        }, 2000); // 3秒后自动消失
    }

    function addClassesInfo(){
        window.location.href = '/classes/addClassesPage'
    }

    var messageInfo = [[${resultInfo?.message}]];
    if(messageInfo != null){
        document.getElementById("messageBlue").innerHTML = messageInfo;
        this.showNotification("notificationBlue");
    }

    var pageNum = [[${pageVo.getPageNum()}]];
    var pageSum = [[${pageVo.pages}]]
    if(pageNum === 1){
        document.getElementById("beforePage").style.display = 'none';
    }
    if(pageNum === pageSum || pageSum === 0){
        document.getElementById("afterPage").style.display = 'none';
    }

    function beforeChangePage(){
        pageNum = pageNum - 1;
        window.location.href = '/classes/list?pageNum='+pageNum+'&pageSize=7';
    }

    function afterChangePage(){
        pageNum = pageNum + 1;
        window.location.href = '/classes/list?pageNum='+pageNum+'&pageSize=7';
    }


    function deleteClasses(classesId){
        if(confirm("确定要删除id为"+classesId+"的班级信息吗？")){
            window.location.href = '/classes/deleteClassesOne?classId='+classesId;
        } else {
            document.getElementById("messageGrey").innerHTML = "取消删除";
            this.showNotification("messageGrey");
        }

    }

    function outLogin(){
        location.href = '/outLogin'
    }

    function editDepartmentPage(classId){
        window.location.href = '/classes/updateClassesPage?classId=' + classId;
    }

    function searchClasses(){
        let searchClassId = document.getElementById("searchClassID").value;
        let searchClassName = document.getElementById("searchClassName").value;
        let searchGradeNew = document.getElementById("searchGrade").value;
        let searchMajorNew = document.getElementById("searchMajor").value;
        if(searchGradeNew == "请选择年级"){
            document.getElementById("searchGrade").value = '';
        }
        // if (searchMajorNew == "请选择专业"){
        //     document.getElementById("searchMajor").value = '';
        // }
        window.location.href = '/classes/list?pageNum=1&pageSize=7&classID='+searchClassId+'&className='+searchClassName+'&major='+searchMajorNew+'&grade='+document.getElementById("searchGrade").value
    }

    function reset(){
        document.getElementById("searchClassID").value = "";
        document.getElementById("searchClassName").value = "";
        document.getElementById("searchGrade").value = "";
        document.getElementById("searchMajor").value = ""
    }
</script>

</html>